<template>
	<div class="frame-page h-panel">
		<div class="h-panel-bar">
			<span class="h-panel-title">用户管理</span>
			<div class="h-panel-right"></div>
		</div>
		<div class="h-panel-bar">
			<div class="search-filter-wrap">
				<span class="search-picker-title">搜索</span>
				<Search :width="400" v-model="filter.keyword" @search="doSearch()" showSearchButton></Search>
			</div>
			<div class="search-picker" v-if="dataForms.length > 0">
				<SearchFilter v-for="(item,index) in dataForms" :key="index" v-model="filter.form" :prop="item.field" :multiple="item.multiple" :datas="item.datas" @input="getData()" :title="item.name"></SearchFilter>
			</div>
		</div>
		<div class="h-panel-body">
			<Table :loading="loading" :datas="datas">
				<TableItem :width="80" prop="id" align="center" title="编号"></TableItem>
				<TableItem :width="150" prop="phone" align="center" title="账号"></TableItem>
				<TableItem :width="120" prop="nickname" align="center" title="昵称"></TableItem>
				<TableItem :width="120" align="center" title="头像">
					<template slot-scope="{data}">
						<img :src="data.avatar || '/static/avatar.png'" class="tableimg" @click="$ImagePreview(data.avatar)" @error="$imageError">
					</template>
				</TableItem>
				<TableItem :width="60" align="center" title="性别">
					<template slot-scope="{data}">
						{{data.gender > 0 ? (data.gender == 1 ? '男' : '女') : '未知'}}
					</template>
				</TableItem>
				<TableItem :width="100" prop="province" align="center" title="省份"></TableItem>
				<TableItem :width="100" prop="city" align="center" title="城市"></TableItem>
				<TableItem :width="60" prop="order_count" align="center" title="订单数"></TableItem>
				<TableItem :width="150" align="center" title="创建时间">
					<template slot-scope="{data}">
						{{$global.getDateTime(data.create_time)}}
					</template>
				</TableItem>
				<TableItem :width="80" align="center" title="操作" fixed="right">
					<template slot-scope="{data}">
						<button class="h-btn h-btn-s h-btn-blue" title="编辑资料" @click="doEdit(data.id)"><i class="icon bianji"></i></button>
					</template>
				</TableItem>
			</Table>
			<p></p>
			<Pagination v-if="pagination.total>0"  align="right" v-model="pagination" @change="getData(false)" />
		</div>
		<Modal v-model="openEdit" :closeOnMask="false">
			<Edit @close="openEdit=false" :id="id"></Edit>
		</Modal>
	</div>
</template>

<script>
import Edit from './edit'
export default {
	components : {
		Edit
	},
	data() {
		return {
			id : 0,
			openEdit : false,
			pagination: {
				page: 1,
				size: 20,
				total: 0
			},
			datas: [],
			loading: false,
			dataForms: [],
			filter: {
				keyword : '',
				form:{}
			}
		};
	},
	mounted() {
		this.create()
	},
	methods: {
		create() {
			if(this.$global.config.user_form_id > 0){
				this.dataForms = this.$global.getArrayById(this.$global.config.forms,this.$global.config.user_form_id,'data') || []
			}
			this.getData()
		},
		doSearch (){
			this.filter = {keyword:this.filter.keyword,form:{}}
			this.getData()
		},
		async getData(reload = true) {
			if (reload) {
				this.pagination.page = 1
			}
			this.loading = true
			let data = await this.$api('GET','user',Object.assign(this.filter,{page:this.pagination.page,pageSize:this.pagination.size}))
			this.datas = data.data
			this.pagination.total = data.total
			this.loading = false
		},
		doEdit (id){
			this.id = id
			this.openEdit = true
		}
	}
};
</script>

<style lang='less'>

</style>